//引入头部

$(document).ready(function () {
    $('#yxh-header').load('dyp-index-temp.html');
});


//渲染页面
var total
function pageAjax(n) {
    function xAjax(server, obj) {
        pAjax({
            url: server,
            data: {
                pagenum: n,
                pagesize: 10,
            }
        }).then(function (res) {
            let json = JSON.parse(res)
          


            $('.yxh-pageBox').css({
                position: 'relative'
            })
            $('.yxh-pageBox span').html('1-' + parseInt(total / 10) + '/共' + total + '件商品')
            $('.yxh-pageBox span').css({
                color: '#71797f',
                fontSize: '14px',
                position: 'absolute',
                left: '0',
                top: '30px'
            })
            var main = document.querySelector(obj)

            //存总条数 给分页使用
            total = json.total

            //循先清空后渲染
            main.innerHTML = ''

            //循环渲染页面
            //把图片和a都加上一个id然后存上为了跳转到详情页
            json.data.forEach(function (ele, index) {


                var str = `
                <div class="yxh-smallMain">
                <div class="yxh-smallCon" data-id ="${ele.id}">
                     <img src="${ele.listPic_220_240}" alt="">
                     <span>￥${ele.price}</span>
                     <div class='yxh-ps'>
                     <p>${ele.Pdt_title_utf8}</p>
                     <p>${ele.pdt_show_utf8}</p>
                     </div>
                     <section class='yxh-sec'>
                         <span></span>
                         收藏
                     </section>
                     <section class='yxh-shop'>
                         <span></span>
                         加入购物车
                    </section>
    
                 </div>
             </div>
                `

                main.innerHTML += str

            })
        })
    }
    xAjax('../server/list.php', '.yxh-big')
    xAjax('../server/list-price.php', '.yxh-b1')
    xAjax('../server/list-num.php', '.yxh-b2')
    xAjax('../server/list-num2.php', '.yxh-b3')
}
pageAjax(1)

var login = document.querySelector('#yxh-login')
var mask = document.querySelector('.yxh-mask')

//本地存储
var arr = []
var dypArr = []
var cArr = []
var move
var big = document.querySelector('.yxh-big')
big.addEventListener('click', function (ev) {
    // $('.yxh-big').on('click',function(ev){
    //详情页需要
    var id = ev.target.parentNode.getAttribute('data-id')
    localStorage.setItem('detailId', id)


    // 页面跳转到详情页页面
    //   window.location.href = 'lxy-detail.html'

    // 郝思文购物车页数据
    if (ev.target.className == 'yxh-shop') {

        // 页面跳转到购物车页面
        // window.location.href = ''


        let iNow1 = 0;
        let n = ev.target.parentNode.getAttribute('data-id')
        console.log(ev.target.parentNode.children[2].children[0].innerHTML)


        //去重
        function findArr(arr, n) {
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].id == n) {
                    iNow1 = i
                    return true
                }
            }
            return false
        }

        var flag = findArr(arr, n)

        //存状态
        var flagY = 'yes';

        if (flag) {
            arr[iNow1].count++
        } else {
            arr.push({
                id: n,
                pic: ev.target.parentNode.children[0].src,
                scprice: ev.target.parentNode.children[1].innerHTML.slice(1) - 0,
                dgprice: (ev.target.parentNode.children[1].innerHTML).slice(1) - 20,
                detail: ev.target.parentNode.children[2].children[1].innerHTML,
                count: 1,
                flag:flagY
            })
        }
        localStorage.setItem('shopArr', JSON.stringify(arr))
    } else if (ev.target.tagName === 'IMG') {

        let iNow2 = 0;
        let n2 = ev.target.parentNode.getAttribute('data-id')


        //去重
        function findArr(arr, n2) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].id == n2) {
                    iNow2 = i
                    return true
                }
            }
            return false
        }

        var flag = findArr(dypArr, n2)

        if (flag) {
            dypArr[iNow2].count++
        } else {
            dypArr.push({
                id: n2,
                pic: ev.target.src,
                scprice: ev.target.nextElementSibling.innerHTML.slice(1) - 0,
                dgprice: (ev.target.nextElementSibling.innerHTML).slice(1) - 20,
                detail: ev.target.nextElementSibling.nextElementSibling.children[1].innerHTML,
                count: 1
            })
        }
  
        localStorage.setItem('RecentArr', JSON.stringify(dypArr))
    } else if (ev.target.className === 'yxh-sec') {
        let iNow3 = 0;
        let n3 = ev.target.parentNode.getAttribute('data-id')


        //去重
        function findArr(arr, n3) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].id == n3) {
                    iNow3 = i
                    return true
                }
            }
            return false
        }

        var flag = findArr(cArr, n3)

        if (flag) {
            cArr[iNow3].count++
        } else {
            cArr.push({
                id: n3,
                pic: ev.target.parentNode.children[0].src,
                scprice: ev.target.parentNode.children[1].innerHTML.slice(1)-0,
                dgprice: (ev.target.parentNode.children[1].innerHTML).slice(1) - 20,
                detail: ev.target.parentNode.children[2].children[1].innerHTML,
                count: 1
            })
        }
        localStorage.setItem('CollectArr', JSON.stringify(cArr))
    }

    // 跳出登录
    var biggest = document.querySelector('#yxh-biggest')
    if (ev.target.className === 'yxh-sec') {
        login.style.display = 'block'
        mask.style.display = 'block'

        //去除滚动条
        document.documentElement.style.overflow = 'hidden';
    }

})

login.addEventListener('click', function () {
    login.style.display = 'none'
    mask.style.display = 'none'
    document.documentElement.style.overflow = 'auto';
})


//引入分页
setTimeout(function () {
    var oPage = document.querySelector('.yxh-pageBox')
    new Pagination(oPage, {
        pageInfo: {
            pagenum: localStorage.getItem('pagenum') - 0 || 1,     // 当前在第几页
            pagesize: 10,   // 一页多少条数据
            total: total,    // 总条数
            totalpage: 2,// 总页数
        },
        // 文字信息
        textInfo: {
            prev: '<&nbsp;上一页',
            next: '下一页&nbsp;>',
        },
        change(n) {
            localStorage.setItem('pagenum', n)
            pageAjax(n)
        }
    })
}, 200)

var arrHot = [{
    price: "296",
    src: "https://img01.hua.com/uploadpic/newpic/9012452.jpg_220x240.jpg",
    title: '经典99枝，鼎力推荐！'
},
{
    price: "456",
    src: "https://img01.hua.com/uploadpic/newpic/9012450.jpg_220x240.jpg",
    title: '特色新品 渐变色艾莎玫瑰'
}
    , {
    price: "143",
    src: "https://img01.hua.com/uploadpic/newpic/9012177.jpg_220x240.jpg",
    title: '全新韩式系列 珍品玫瑰'
},]

var hot = document.querySelector('.yxh-hotFlower')
arrHot.forEach(function (ele, index) {
    var str = `   
            <div class='yxh-hh'>     
            <img src="${ele.src}" alt="">
            <p>${ele.title}</p>
            <span>￥${ele.price}</span>
            </div>
    `
    hot.innerHTML += str
})

// 选项卡
$('.yxh-smallNav>li').click(function () {
    $(this).addClass('on').siblings().removeClass('on')
    $('.yxh-big').eq($(this).index()).addClass('active').siblings('div').removeClass('active')
})

// 导航栏
$('.yxh-navCon>li').hover(function () {
    $(this).css('background', 'rgb(254,122,36)')
}, function () {
    $(this).css('background', 'rgb(255,106,0)')
})

$('.yxh-allC').mouseenter(function () {
    $('.yxh-second').css({
        display: 'block'
    })
})

$('.yxh-second').hover(function () {
    $(this).css({
        display: 'block'
    })
}, function () {
    $(this).css({
        display: 'none'
    })
})


// $('.yxh-ps').hover(function(){
//     $('.yxh-ps>p').css({
//         color:'#ff6600',
//         textDecoration: 'underline'
//     })
// })
